<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            /* border: 1px solid black; */
            /* height:400px; */
            display: flex;
            /*flex-direction: row; 正常行排列*/
            /* flex-direction: row-reverse; 行反转排列*/
            /* flex-direction: column; 垂直排列 */
            /* flex-direction: column-reverse; 垂直反转排列*/

             flex-wrap: wrap;  /*按照大小自动换行*/
            /* flex-wrap: nowrap;  强制将内容放在一行来处理*/
            /* flex-wrap: wrap-reverse;  反转行的顺序*/
            /*  flex-flow: row nowrap;  组合flex-direction + flex-wrap */

            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /*  justify-content: space-between;   元素之间等间距排列 */
            /* justify-content: space-around;    元素两侧的间隔相等排列 */
            
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */
            /* align-items: stretch; */
        }
        .row {
            width: 200px;
            height: 200px;
            background: #000;
            text-align: center;
            line-height: 100px;
            font-size: 32px;
            color: #fff;
            text-align: center;
            line-height: 200px;
        }
        .row1 {
            background: rgb(237, 40, 70);
            /*flex-shrink: 0;   定义缩小比例，默认为1，即如果空间不足，该项目将缩小 */
            /* flex-grow : 1; */
        }
        .row2 {
            background: rgb(95, 58, 227);
            /* flex-grow : 4; */
        }
        .row3 {
            background: rgb(40, 237, 96);
            /* flex-grow : 1; */
        }
        .row4 {
            background: #e6ed28;
        }
        .row5 {
            background: rgb(234, 86, 170);
        }
        .row6 {
            background: rgb(181, 237, 129);
        }
        .row7 {
            background: #81e1f2a6;
        }
        .row8 {
            background: #ea831c;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row row1">1</div>
        <div class="row row2">2</div>
        <div class="row row3">3</div>
        <div class="row row4">4</div>
        <div class="row row5">5</div>
        <div class="row row6">6</div>
        <div class="row row7">7</div>
        <div class="row row8">8</div>
    </div>
</body>
</html>